<template>
  <view class="refund-agree-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-icon" @tap="cancelRefund">
        <uni-icons type="left" color="#ffffff" size="24"></uni-icons>
      </view>
      <text class="header-title">商家确认退款</text>
      <view class="header-right"></view>
    </view>

    <!-- 主内容区 -->
    <view class="content-wrapper">
      <!-- 退款信息卡片 -->
      <view class="refund-info-card">
        <!-- 退款方式 -->
        <view class="info-item">
          <text class="info-label">
            <uni-icons type="creditcard" size="24" color="#666666" class="info-icon"></uni-icons>
            退款方式
          </text>
          <text class="info-value">{{ refundInfo.refund_type_name || '退货退款' }}</text>
        </view>

        <!-- 退款金额 -->
        <view class="info-item">
          <text class="info-label">
            <uni-icons type="money-box" size="24" color="#666666" class="info-icon"></uni-icons>
            退款金额
          </text>
          <text class="info-value amount">¥{{ refundInfo.refund_apply_money || '0.00' }}</text>
        </view>

        <!-- 审核选项 -->
        <view class="info-item">
          <text class="info-label">
            <uni-icons type="checkbox" size="24" color="#666666" class="info-icon"></uni-icons>
            审核
          </text>
          <!-- 美化后的单选框 -->
          <radio-group @change="radioChange" class="radio-group">
            <label class="radio-label">
              <radio :value="1" checked="true" color="#ff6b35"></radio>
              <text class="radio-text">同意</text>
            </label>
            <label class="radio-label">
              <radio :value="2" color="#ff6b35"></radio>
              <text class="radio-text">拒绝</text>
            </label>
          </radio-group>
        </view>

        <!-- 取货配送员 -->
        <view class="info-item" v-if="selectedAudit == 1">
          <text class="info-label">
            <uni-icons type="truck" size="24" color="#666666" class="info-icon"></uni-icons>
            取货配送员
          </text>
          <view class="picker-wrapper" @tap="showDeliveryPicker">
            <picker :range="deliveryList" range-key="nickname" @change="deliveryChange">
				<view style="width:400rpx;">
					{{  deliveryPerson.nickname }}
				</view>
			</picker>
          </view>
        </view>

		<view class="info-item" v-else>
          <text class="info-label">
            <uni-icons type="truck" size="24" color="#666666" class="info-icon"></uni-icons>
            拒绝说明
          </text>
          <input class="info-value" v-model="refundInfo.refund_refuse_reason" placeholder="请输入拒绝说明" />
        </view>
      </view>
    </view>

    <!-- 底部按钮组 -->
    <view class="button-group">
      <button class="cancel-btn" @tap="cancelRefund">取消</button>
      <button class="confirm-btn" @tap="confirmRefund">确认</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order_goods_id: '',
      refundInfo: {},
      orderInfo: {},
      deliveryList: [],
      deliveryPerson: {
        member_id: '',
        nickname: '请选择配送员'
      },
      showPicker: false,
      selectedAudit: 1 // 默认选择同意
    }
  },
  onLoad(options) {
    this.order_goods_id = options.id;
    this.init();
    //获取配送员列表
    this.getDeliveryList();
  },
  methods: {
    init() {
      this.$api.sendRequest({
        url: '/api/admin/detail',
        data: {
          order_goods_id: this.order_goods_id
        },
        success: res => {
          if (res.code >= 0) {
            this.orderInfo = res.data.order_info;
            this.refundInfo = res.data.detail;
          }
        }
      });
    },
    getDeliveryList() {
      this.$api.sendRequest({
        url: '/api/admin/deliveryman',
        data: {},
        success: res => {
          this.deliveryList = res.data;
        },
        complete() {
          uni.hideLoading()
        }
      })
    },
    // 显示配送员选择器
    showDeliveryPicker() {
      this.showPicker = true;
      setTimeout(() => {
        this.showPicker = false;
      }, 100);
    },
    // 配送员选择回调
    deliveryChange(e) {
      // 订阅消息
      uni.requestSubscribeMessage({
        tmplIds: ['4i3Lbuk4F_WezjPvvJgFK-76QGxupghZqebQtbb5SbA','BEM0aJf3GdAkY28RfIgbfLSLUigZzB5SuKG-J5k5H7k','Y_QJWUhJRiT2orhZCjuUgbtQ8rq0K6zecekSJR35CjY'],
        success(res) {
          console.log(res);
        },
        fail(e) {
          console.log(e);
        }
      })
      this.deliveryPerson = this.deliveryList[e.detail.value]
    },
    // 审核选项变更
    radioChange(e) {
      this.selectedAudit = e.detail.value;
    },
    // 取消退款
    cancelRefund() {
      // 返回上一页
      uni.navigateBack();
    },
    // 确认退款
    confirmRefund() {
      if(this.deliveryPerson.member_id == ''&&this.selectedAudit==1){
        uni.showToast({
          title: '请选择配送员',
          icon: 'none'
        });
        return;
      }
      uni.showLoading({
        title: '处理中...'
      });
      this.$api.sendRequest({
        url: '/api/admin/agree',
        data: {
			selectedAudit: this.selectedAudit,
			refund_refuse_reason: this.refundInfo.refund_refuse_reason,
			order_goods_id: this.order_goods_id,
			delivery_id: this.deliveryPerson.member_id,
        },
        success: res => {
          if (res.code >= 0) {
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              duration: 2000
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          } else {
            uni.showToast({
              title: res.msg || '操作失败',
              icon: 'none',
              duration: 2000
            });
          }
        },
        complete() {
          uni.hideLoading()
        }
      })
    }
  }
}
</script>

<style lang="scss">
// 导入uni.scss变量
@import "../../../uni.scss";

// 主容器
.refund-agree-container {
  padding: 0;
  background-color: #f8f9fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 顶部标题栏
.header {
  background: linear-gradient(135deg, #ff6b35 0%, #ff7e54 100%);
  color: #ffffff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-icon {
  padding: 10rpx;
  border-radius: 50%;
}

.back-icon:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.header-right {
  width: 44rpx;
}

// 内容区域
.content-wrapper {
  flex: 1;
  padding: 30rpx;
}

// 退款信息卡片
.refund-info-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.refund-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8rpx;
  height: 100%;
  background: linear-gradient(to bottom, #ff6b35 0%, #ff9966 100%);
}

// 信息项
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.info-item:last-child {
  border-bottom: none;
}

// 标签样式
.info-label {
  font-size: 32rpx;
  color: #555555;
  display: flex;
  align-items: center;
  font-weight: 500;
}

// 信息图标
.info-icon {
  margin-right: 16rpx;
}

// 值样式
.info-value {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

// 金额样式
.amount {
  font-size: 48rpx;
  color: #ff6b35;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(255, 107, 53, 0.2);
  letter-spacing: 1rpx;
}

// 单选框组
.radio-group {
  display: flex;
  align-items: center;
}

.radio-label {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  background-color: #f8f8f8;
}

.radio-text {
  font-size: 30rpx;
  color: #333333;
  margin-left: 12rpx;
  font-weight: 500;
}

// 选择器样式
.picker-wrapper {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  background-color: #f8f8f8;
  border: 1rpx solid transparent;
}

.picker-text {
  font-size: 30rpx;
  color: #333333;
  margin-right: 10rpx;
}

.picker-icon {
  margin-left: 10rpx;
}

.hidden-picker {
  display: none;
}

// 输入框样式优化
input.info-value {
  font-size: 30rpx;
  color: #333333;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  background-color: #f8f8f8;
  border: 1rpx solid #eeeeee;
}

input.info-value:focus {
  border-color: #ff6b35;
  background-color: #ffffff;
  box-shadow: 0 0 0 3rpx rgba(255, 107, 53, 0.1);
}

input.info-value::placeholder {
  color: #cccccc;
  font-size: 28rpx;
}

// 注意事项
.notice-section {
  margin-top: 30rpx;
  padding: 28rpx;
  background-color: #fff7e6;
  border-radius: 16rpx;
  border-left: 4rpx solid #ff6b35;
}

.notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.notice-icon {
  margin-right: 10rpx;
}

.notice-label {
  font-size: 28rpx;
  color: #ff6b35;
  font-weight: bold;
}

.notice-content {
  font-size: 28rpx;
  color: #666666;
  line-height: 48rpx;
  font-weight: 400;
}

// 按钮组
.button-group {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #ffffff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
  position: sticky;
  bottom: 20rpx;
  z-index: 5;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50rpx;
  font-size: 34rpx;
  margin: 0 15rpx;
  font-weight: bold;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 取消按钮样式优化
.cancel-btn {
  background-color: #ffffff;
  color: #666666;
  border: 2rpx solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

// 确认按钮样式优化
.confirm-btn {
  background: linear-gradient(135deg, #ff6b35 0%, #ff7e54 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

// 响应式调整
@media screen and (max-width: 320px) {
  .info-label,
  .info-value {
    font-size: 28rpx;
  }
  
  .amount {
    font-size: 40rpx;
  }
  
  .cancel-btn,
  .confirm-btn {
    font-size: 32rpx;
    height: 90rpx;
    line-height: 90rpx;
  }
  
  .notice-content {
    font-size: 26rpx;
    line-height: 44rpx;
  }
}

@media screen and (min-width: 768px) {
  .refund-agree-container {
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  }
  
  .header {
    border-radius: 0;
  }
}
</style>
